mark-camera-color = #33475F
mark-model-color = #9d55b8
mark-cabinet-color = #ea8010

mark = camera model cabinet

.mark-camera
  background-image: url(../img/mark_camera.png)

.mark-model
  background-image: url(../img/mark_model.png)

.mark-cabinet
  background-image: url(../img/mark_cabinet.png)

.mark
  position: relative
  display: table
  border: 1px solid #f40
  &.marking
    cursor: crosshair
    img
      opacity:0.3
  img
    display: block
  .map-mark
    position: absolute
    top: 0
    left: 0
    width: 8px
    height: 8px
    z-index: 2
    border-radius 4px
  .map-camera
    background-color: mark-camera-color
  .map-model
    background-color: mark-model-color
  .map-cabinet
    background-color: mark-cabinet-color

.marking
  .h-line
  .v-line
    position: absolute
    top: 0
    right: 0
    content: ''
    z-index: 100
    background: #f40
  .h-line
    width: 100%
    height: 1px
  .v-line
    width: 1px
    height: 100%

.mark-toolbar
  position fixed
  right: 0
  top: 0
  width: 250px
  height: 100%
  padding: 10px
  background: #e7ecf1
  box-sizing border-box
  border-left: 1px solid #bdc6cf
  propPrefix(box-shadow, #bdc6cf 0 0 1px)
  .mark-toolbox
    margin-bottom: 20px
    .mark-toolbox-head
      margin-bottom: 5px
      color: #4b545a
  .mark-items
    margin: 0 0 20px
    padding: 0
    list-style: none
    overflow: hidden
    .mark-item
      float: left
      width: 32px
      height: 32px
      padding: 5px
      margin-right: 5px
      background-color: #fff
      background-repeat: no-repeat
      background-position: center center
      border: 1px solid #bdc6cf

  .mark-pos
    dl
      margin: 5px 0
      font-size: 12px;
      overflow: hidden
      dt,
      dd
        float: left
        height: 24px
        line-height: 24px
        margin: 0
      dt
        color: #4B545A
        margin-right: 10px
      dd
        width: 60px
        margin-right: 3px
        text-align: center
        background: #fff

  .marked-items
    margin: 0
    padding: 0
    list-style: none
    .marked-item
      padding: 5px 10px
      margin-bottom: 5px
      height: 32px
      line-height: 32px
      color: #777
      font-size: 12px
      background: #fff
      .marked-icon
        float: left
        width: 32px
        height: 32px
        margin-right: 10px
        vertical-align: middle
        content: ''
        background-color: #fff
        background-repeat: no-repeat
        background-position: center center
    .mark-delete
      float: right
      height: 32px
      font-size: 24px
      cursor: pointer
      &:hover
        color: #f40

